<template>
  <div class="dev-home">
    <section class="">
      <h1>JC 工作室</h1>
      <p>你好呀，欢迎来到 JC-Studio —— 一个专注于工程技术的个人博客！</p>
    </section>
    <section class="search-section">
      <div class="search-box">
        <input
          type="text"
          placeholder="百度开发者搜索"
          v-model="searchText"
          @keyup.enter="search"
        />
        <button @click="search">Search</button>
      </div>
    </section>
    <section v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" class="links-section">
      <ul>
        <li v-for="(link, index) in links" :key="index">
          <a :href="link.url" target="_blank">{{ link.name }}</a>
        </li>
      </ul>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import { geadientText, creatGeadient } from 'jc-color'
import type { RgbColorChannels } from 'jc-color'

// http://thispage.tech:9680/jclee1995/jc-color/-/blob/master/jc-color/src/console/print.ts
/**
 * 在web的一个dom上绑定一串彩色文字
 * @param dom
 * @param str
 * @param foreColors
 * @param bgColors
 */
function geadientHtmlText(
  dom: HTMLElement,
  str: string,
  foreColors: (string | RgbColorChannels)[] = ['#EB6461', '#84FC2C', 'green'],
  bgColors: (string | RgbColorChannels)[] = []
) {
  const len = str.length
  const ctn = []
  // 先处理文字
  for (let index = 0; index < len; index++) {
    const char = str[index]
    // const u = new TextUnit(char);
    // ctn.push(u)
  }
}

interface Link {
  name: string
  url: string
}

geadientText('你好呀，欢迎来到 JC-Studio！').print()
geadientText(
  '这里是一个专注于工程技术的个人博客',
  ['#84FC2C', 'yellow'],
  ['red', 'blue', '#EB6461', 'green']
)
  .glimmer()
  .print()
const searchText = ref('')
const links = ref<Link[]>([
  { name: 'Vue.js', url: 'https://vuejs.org/' },
  { name: 'React', url: 'https://reactjs.org/' },
  { name: 'Angular', url: 'https://angular.io/' },
  { name: 'TypeScript', url: 'https://www.typescriptlang.org/' },
  { name: 'SCSS', url: 'https://sass-lang.com/' },
  { name: 'Webpack', url: 'https://webpack.js.org/' },
  { name: 'Babel', url: 'https://babeljs.io/' },
  { name: 'ESLint', url: 'https://eslint.org/' },
  { name: 'Jest', url: 'https://jestjs.io/' },
  { name: 'Cypress', url: 'https://www.cypress.io/' },
  {
    name: 'MDN Web Docs',
    url: 'https://developer.mozilla.org/en-US/docs/Web'
  },
  { name: 'W3Schools', url: 'https://www.w3schools.com/' },
  { name: 'CSS-Tricks', url: 'https://css-tricks.com/' },
  { name: 'Smashing Magazine', url: 'https://www.smashingmagazine.com/' },
  { name: 'DevDocs', url: 'https://devdocs.io/' },
  { name: 'Frontend Masters', url: 'https://frontendmasters.com/' },
  { name: 'FreeCodeCamp', url: 'https://www.freecodecamp.org/' },
  { name: 'Codecademy', url: 'https://www.codecademy.com/' },
  { name: 'Stack Overflow', url: 'https://stackoverflow.com/' },
  { name: 'GitHub', url: 'https://github.com/' }
])

const search = () => {
  const url = `https://kaifa.baidu.com/searchPage?wd=${searchText.value}`
  axios.get(url).then((response: { data: any }) => {
    console.log(response.data)
  })
}
</script>

<style lang="scss" scoped>
.dev-home {
  padding: 25px;
  h1 {
    width: 100%;
    text-align: center;
    padding: 46px 10px 9px 10px;
    font-size: 56px;
  }
  p {
    width: 100%;
    padding: 26px 26px;
    text-align: center;
    // white-space: nowrap;
  }
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
  padding: 10px;
  width: 50%;
  margin: 0 auto;
}

.search-box input[type='text'] {
  flex: 1;
  border: none;
  padding: 0 10px;
  height: 36px;
  font-size: 16px;
}

.search-box button {
  background-color: #f2f2f2;
  border: none;
  color: #757575;
  padding: 0 16px;
  height: 36px;
  border-radius: 24px;
  font-size: 14px;
  cursor: pointer;
  margin-left: 10px;
}

.links-section {
  margin-top: 50px;
}

.links-section ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.links-section li {
  margin: 10px;
}

.links-section a {
  color: #0077c2;
  text-decoration: none;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
}

.links-section a:hover {
  color: #004b87;
}

@media screen and (max-width: 700px) {
  .search-box {
    width: 100%;
  }
}
</style>
